<template>
  <div class="rili-wrapper ui segment">
    <div class="ui grid">
      <div class="twelve wide column">
        <fselect size="small" class="myselect" fname="year" @selectValsChange="setYear" :val="year" :data="years"
                 placeholder="请选择年份"></fselect>

        <div class="ui buttons">
          <button class="ui button primary" @click.prevent="toPre"><i class="icon toggle left"></i></button>
          <button class="ui button" @click.prevent="month=pre1" v-if="pre1>=1">{{pre1}}</button>
          <button @click.prevent="month=currentMonth" class="ui button active currentMonth">{{currentMonth}}</button>
          <button @click.prevent="month=next1" class="ui button" v-if="next1<=12">{{next1}}</button>
          <button @click.prevent="month=next2" class="ui button" v-if="next2<=12">{{next2}}</button>
          <button class="ui button primary" @click.prevent="toNext"><i class="icon toggle right"></i></button>


        </div>

      </div>
      <div class="four wide column">
        <div class="ui buttons">
          <button class="ui button " @click.prevent.stop="setOl(1)" :class="{active:ol1}">有效</button>
          <button class="ui button" :class="{active:ol0}" @click.prevent.stop="setOl(0)">无效</button>
        </div>
      </div>
    </div>
    <table class="ui small column striped celled table">
      <thead class="">
      <tr>

        <th v-for=" wd in weekDays">{{wd}}</th>
      </tr>
      </thead>
      <tbody>

      <tr v-for="days in allDays">
        <td>
          <div class="ui items fieldNames">
            <div class="item">&nbsp;</div>
            <div class="item" v-for="field in fieldNames"><input type="text" :value="field.title" readonly></div>
          </div>
        </td>
        <td v-for="day in days">
          <riliDay :day="day" :modelInfo="modelInfo" :fieldNames="fieldNames" @setDayData="setDayData" :_dayData="rilidata[day.show_full]"></riliDay>

        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script type="text/ecmascript-6">
  import tool from 'src/util/tool';
  import util from '_util/index';
  import _date from 'date-fns'
  import _  from 'lodash';


  import errmsg from 'components/valid/errmsg';
  import fselect from 'components/form/select'
  import riliDay from 'components/field/rili/riliDay'
  import RP from 'src/util/common/attr_rili';

  const store = util.store

  export default {
    data() {
      return {
        val: '',
        ol0: false,
        ol1: false,
        name: '',
        rilidata: {},
        rilidata_emit: [],

        allDays: null,
        month: null,
        _day: null,
        years: null,
        year: null,
        weekDays: [
          this.month, '一', '二', '三', '四', '五', '六', '日'
        ]
      }
    },
    components: {errmsg, fselect,riliDay},
    methods: {
      setOl(flag){
        RP.setOl(this, flag);
      },
      getCalendar(){
        let mid = this.modelInfo.riliDayMid;
        switch (mid) {
          case 55:
            this.getProductQuantityCalendar();
            break;
          case 60:
            this.getWhprodCalendar();
            break;
        }
      },
      getProductQuantityCalendar(){
        let url = tool.getApi(this, 'Editget', 'getProductQuantityCalendar');
        let param = {};
        param.product_id = this.product_id;
        util.getDataCom(this, url, param, (rs) => {
          if(rs&&rs.length>0) {
            rs.forEach(item=> {
              let oldVo = {
                ol: item.ol,
                quantity: item.quantity
              };
              this.$set(this.rilidata,item.target_date,oldVo)
              this.setDayData( item.target_date, oldVo,true);
            });

          }

        })
      },
      getWhprodCalendar(){
        let url = tool.getApi(this, 'Editget', 'getWhprodCalendar');
        let param = {};
        param.warehouse_product_ids = this.product_id;
        util.getDataCom(this, url, param, (rs) => {
          if(rs&&rs.length>0) {
            rs.forEach(item=> {
              let oldVo = {
                fc_serv: item.fc_serv,
                fc_serv_up: item.fc_serv_up,
                fc_sp: item.fc_sp,
                sale_price: item.sale_price,
                is_valid: item.is_valid
              };
              this.$set(this.rilidata,item.target_date,oldVo)

              this.setDayData( item.target_date, oldVo,true);
            });

          }

        })
      },

      setDayData(date,vo,isOld=false){
        let mid = this.modelInfo.riliDayMid;
        let date_key= mid == 55 ? 'date' : 'target_date';
        vo[date_key] = isOld?date:this.year + '-' + date;
        let ind=-1;
        if(mid == 55)
          ind = _.findIndex(this.rilidata_emit, {date: vo[date_key]});
        else
          ind = _.findIndex(this.rilidata_emit, {target_date: vo[date_key]});
        if(ind!==-1){
          this.rilidata_emit.removeAt(ind);
        }

        this.rilidata_emit.push(vo)
        this.$emit('setRili', this.rilidata_emit,this.product_id)
      },
      setYears(){
        let year = this.year
        let from = year - 5;
        let end = year + 5;

        let years = [];
        for (let i = from; i <= end; i++) {
          years.push({
            title: i,
            id: i,
          });
        }
        this.years = years;
      },
      setYear(year){
        this.year = Number(year)
      },
      toPre(){
        let month = this.month;
        if (month == 1)
          month = 12
        else
          month--
        this.month = month
      },
      toNext(){
        if (this.month == 12)
          this.month = 1
        else
          this.month++
      },
      getAllDate(){
        this.weekDays[0] = `${this.month}月`

        let firstDay = _date.setISODay(new Date(this.year, this.month - 1, 1), 1);
        let lastDay = _date.setISODay(new Date(this.year, this.month, 0), 7);
//        let nextDays = 7 - _date.getISODay(lastDay);

        let days = _date.eachDay(
          firstDay,
          lastDay
        )
        days = days.map(day=> {
          let show = _date.format(day, 'MM-DD')
          let show_full = _date.format(day, 'YYYY-MM-DD')
          let isThisMonth = (_date.getMonth(day) + 1) == this.month
          return {
            show, day, isThisMonth,show_full
          }
        })
        this.allDays = _.chunk(days, 7);
      },

    },
    watch: {
      month: function (val, old) {
        if (val != old) {
          this.getAllDate()
        }
      },
      ol: function (val, old) {
          RP.ol_init(this)
      },
      year: function (val, old) {
        if (val != old) {
          this.getAllDate()
        }
      },
    },
    computed: {
      pre1(){
        return this.month - 1
      },
      currentMonth(){
        return this.month
      },
      next1(){
        return this.month + 1
      },
      next2(){

        return this.month + 2
      },
    },
    props: ['field', 'fieldNames','product_id','modelInfo','ol'],
    created() {
      this.month = _date.getMonth(new Date()) + 1;
      this.year = _date.getYear(new Date()) ;
      this._day = _date.getDate(new Date()) ;


      RP.ol_init(this)
      this.getCalendar();
      this.setYears();
      this.getAllDate();
    },
    mounted() {
    }
  };
</script>

<style scoped rel="stylesheet/less" lang="less">
  .rili-wrapper {
    .myselect {
      display: inline-block;
      margin-right: 10px;
    }
    .ui.button.currentMonth {
      color: #9e1317;
    }
    .ui.items {
      input {
        border: none;
        background-color: transparent;
      }
    }
  }
</style>
